<template>
  <div class="custom-image">
    <img
      :class="[
        'custom-image-cover',
      ]"
      :src="src"
      :alt="alt"
      :width="width"
      :height="height"
      preset="default"
      preload
      loading="lazy"
    />
  </div>
</template>

<script setup lang="ts">
defineProps<{
  src: string;
  alt?: string;
  width?: string;
  height?: string;
}>();
</script>

<style scoped lang="scss">
.custom-image {
  width: inherit;
  height: inherit;
  background-size: 100% 100%;

  &-cover {
    display: block;
    width: inherit;
    height: inherit;
    user-select: none;
  }
}
</style>
